<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" %>
<!-- TODO 参考下阿里云的登录, 阿里云float-tool,花瓣的float-tool qrcode -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../css/mini.css"/>
    <link rel="stylesheet" href="../css/form.css"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <style type="text/css">
        .icon-notice {
            display: inline-block;
        }
        .icon-notice {
            background-image: url(../img/notice.png);
        }
        .icon-error {
            width: 14px;
            height: 14px;
            background-position: -30px -34px;
        }
        /* large */
        .login-box.large {
            width: 360px;
        }

        .login-box.large .ph-label {
            line-height: 40px;
            height: 40px;
            padding: 0 0 0 10px;
            margin-top: 0;
        }

        .login-box.large .field {
            padding-bottom: 15px;
        }

        .login-box.large .field label {
            color: #4d4d4d;
            font: 14px/1.5 tahoma, arial, \5b8b\4f53;
        }

        .login-box.large .field input {
            padding: 0 10px;
        }

        .login-box.large .login-text {
            width: 278px;
            height: 32px;
            margin-right: 0;
        }

        .login-box.large .checkcode {
            /*width: 83px;*/
            width: 143px;
        }

        .login-box.large .submit button {
            height: 40px;
            width: 300px;
        }

        /* extra large */
        .login-box.extra-large {
            width: 400px;
        }

        .login-box.extra-large .msg {
            margin-bottom: 15px;
        }

        .login-box.extra-large .ph-label {
            line-height: 50px;
            height: 50px;
            padding: 0 0 0 10px;
            margin-top: 0;
            font-size: 16px;
        }

        .login-box.extra-large .field {
            padding-bottom: 15px;
        }

        .login-box.extra-large .field .forget-pw {
            display: none;
        }

        .login-box.extra-large .field label {
            display: none;
            color: #4d4d4d;
            font: 14px/1.5 tahoma, arial, \5b8b\4f53;
        }

        .login-box.extra-large .field input {
            padding: 0 10px;
        }

        .login-box.extra-large .login-text {
            width: 318px;
            height: 50px;
            margin-right: 0;
            font-size: 16px;
        }

        .login-box.extra-large .checkcode {
            /*width: 123px;*/
        }

        .login-box.extra-large .check-code-img {
            position: absolute;
            top: 6px;
            left: 240px;
            /*border: 1px solid #ccc;*/
            cursor: pointer;
        }

        .login-box.extra-large .change-code {
            display: none;
        }

        .login-box.extra-large .submit button {
            height: 50px;
            width: 340px;
            font-size: 20px;
        }

    </style>
    <%--<link type="text/css" href="../css/mini.css">--%>
</head>
<body>
<script type="text/javascript" src="${ctx}/js/lib/jquery-1.7.2.min.js"></script>
<script>
    $(function () {
        $('a.change-code').click(function (e) {
            //$(this).attr('src', '/kaptcha.jpg?t='+(new Date().getTime()));
            $(this).prev().attr('src', '/captcha.png?t=' + (new Date().getTime()));
            e.preventDefault();
        })
        $('img.check-code-img').click(function (e) {
            $(this).attr('src', '/captcha.png?t=' + (new Date().getTime()));
        });
    });
    //    with(document)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("exparams","category=&userid=&aplus&yunid=&3d96be71b3eb5&asid=AABAyFNUwxkfuiJ6YSk=",id="tb-beacon-aplus",src=(location>"https"?"//s":"//decode")+".tbcdn.cn/s/aplus_v2.js")
</script>
<div id="content">
    <div class="login-box ${param['style']}" id="J_LoginBox">
        <script type="text/javascript">(function (x) {
            x && (x.className += " loading")
        })(document.getElementById("J_LoginBox"))</script>
        <!--
        <div class="hd">
            <ul>
                <li class="current"><h2>登录</h2></li>
            </ul>
        </div>
        -->
        <div class="bd">
            <div id="J_Message" class="login-msg msg hidden">
                <p class="error">
                    <i class="icon-notice icon-error"></i>
                    验证码错误，请重新输入。
                </p>
            </div>
            <div class="static">
                <form action="/login" method="post">
                    <div class="field username-field">
                        <label for="username">登录名:</label>
                        <input type="text" id="username" class="login-text" tabindex="1">
                        <span id="J_NickX1414911775644" class="nickx hidden" href="javascript:void(0)"
                              style="line-height: 16px; font-weight: 700;text-align: center;">&times;</span>
                    </div>
                    <div class="field">
                        <label for="password">登录密码:</label>
                        <a href="login-mini.jsp" target="_blank" id="forget-pw-safe" class="forget-pw">忘记登录密码?</a>
                        <span>
                            <input type="password" name="password" id="password" class="login-text highlight"
                                   tabindex="2">
                        </span>
                    </div>
                    <div class="field field-checkcode ph-focus hidden">
                        <span class="ph-label">验证码</span>
                        <input type="text" class="login-text checkcode" maxlength="4" name="checkcode" tabindex="3"
                               autocomplete="off">
                        <img src="/captcha.png" data-src="captcha.png" class="check-code-img">
                        <a href="#" class="change-code">看不清<br>换一张</a>
                    </div>
                    <div class="submit">
                        <input type="hidden" name="full_redirect" value="${param['full_redirect']}">
                        <input type="hidden" name="redirectUrl" value="${param['redirectUrl']}">
                        <button type="submit" tabindex="4">登　录</button>
                    </div>
                    <ul class="entries">
                        <li id="registerUrl_1" class="register">
                            <a id="J_RegisterLink1" href="login.jsp" target="_blank" tabindex="8">免费注册</a></li>
                        </li>
                    </ul>

                </form>
            </div>
        </div>
        <div class="ft"></div>
    </div>
</div>
<script type="text/javascript">
    // 看下效果
    setTimeout(function () {
        (function (x) {
            if (x.className) {
                var regExp = new RegExp("(^|\\s+)" + 'loading' + "(\\s+|$)");
                x.className = x.className.replace(new RegExp("(^|\\s+)loading(\\s+|$)"), function ($0, $1, $2) {
                    return $1 === ' ' && $2 === ' ' ? ' ' : '';
                });
            }
        })(document.getElementById("J_LoginBox"));
    }, 0);
</script>
</body>
</html>